import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:znmm/UI/A_Common/image/cached_network_Image.dart';
import 'package:znmm/UI/A_Common/image/custom_network_image.dart';
import 'package:znmm/UI/ProductPages/view/product_all_view.dart';
import 'package:znmm/config/app_asset.dart';
import '../mag/home_mag.dart';

class TopSwiperView extends StatefulWidget {
  const TopSwiperView({super.key});

  @override
  State<TopSwiperView> createState() => _TopSwiperViewState();
}

class _TopSwiperViewState extends State<TopSwiperView> {
  late List<String> _imageList = [];
  int _selectIndex = 0;

  //自动滚动
  final PageController _controller = PageController(initialPage: 0);

  @override
  void initState() {
    super.initState();
    _imageList = HomeMag().getBannerList();

    HomeMag().reqHomeBanner(
      callback: () {
        setState(() {
          _imageList = HomeMag().getBannerList();
        });
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return _imageList.isNotEmpty
        ? Stack(children: [
            Container(
              height: 220,
              margin: const EdgeInsets.fromLTRB(5, 0, 5, 0),
              // decoration: BoxDecoration(
              //   color: Theme.of(context).splashColor,
              //   borderRadius: const BorderRadius.all(Radius.circular(10)),
              // ),
              child: PageView.builder(
                controller: _controller,
                itemBuilder: (context, index) {
                  String imageUrl = _imageList[index];
                  return GestureDetector(
                    onTap: () {
                      Get.to(const ProductAllView());
                    },
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10.0),
                      child: SizedBox(
                          width: double.infinity,
                          height: double.infinity,
                          child: CustomNetworkImage(
                            imageUrl: imageUrl,
                            // width: 150,
                            // height: 150,
                            fit: BoxFit.cover,
                          )

                          //     CachedNetworkImageLoader(
                          //   imageUrl: imageUrl,
                          //   fit: BoxFit.fill,
                          // ),
                          ),
                    ),
                  );
                },
                itemCount: _imageList.length,
                allowImplicitScrolling: true,
                onPageChanged: (value) {
                  setState(() => _selectIndex = value);
                },
              ),
            ),
            _buildPageIndicator()
          ])
        : Container(
            height: 220,
            width: double.infinity,
            margin: const EdgeInsets.fromLTRB(5, 0, 5, 0),
            child: Image.asset(
              AppAsset.invalidImage,
              fit: BoxFit.fill,
            ),
          );
  }

  Widget _buildPageIndicator() {
    List<Widget> list = [];
    for (int iIndex = 0; iIndex < _imageList.length; iIndex++) {
      list.add(iIndex == _selectIndex ? _indicator(true) : _indicator(false));
    }
    return Container(
      height: 220,
      alignment: Alignment.bottomCenter,
      padding: const EdgeInsets.only(bottom: 12),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: list,
      ),
    );
  }

  Widget _indicator(bool isActive) {
    return SizedBox(
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 150),
        margin: const EdgeInsets.symmetric(horizontal: 5.0),
        height: 4.0,
        width: isActive ? 16 : 4.0,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(2)),
          color: isActive ? Colors.blue : Colors.black,
        ),
      ),
    );
  }
}
